<template>
  <div :class="{showBackstage:displayMessage.showBackstage}" class="analysis" @click="() => displayMessage.showBackstage && cancel()" :style="{bottom: displayMessage.showBackstage && styles ? styles.bottom : 0}">
    <div class="content" :visible="waiting" :footer="null">
      <a-icon type="close" class="close cursor" v-if="!displayMessage.showBackstage && displayMessage.end" @click="close"/>
      <div class="loading">
        <img :src="displayMessage.end ? tupuRobot.tupuRobotStatic : tupuRobot.tupuRobotAnimate" :style="{width: displayMessage.end ? '17.5%' : '12%'}" alt="头像">
        <p class="fileNum">{{displayMessage.end ? '解析完成' : '正在解析...'}} {{displayMessage.successCount + displayMessage.failCount + displayMessage.updateCount}}/{{fileSize}}</p>
      </div>
      <!-- <div v-show="!displayMessage.showBackstage">
        <parse-resume ref="parseRsume" :content="displayMessage" :noTitle="true" @showCandidate="showCandidateProfile"></parse-resume>
        <p class="backstage"><span class="blue_text cursor" @click.stop="cancel">后台运行</span></p>
      </div> -->
    </div>
  </div>
</template>
<script>
import tupuRobot from '@/util/tupuRobot'
import { analyResult } from '@/api/resume'
export default {
  props: ['visible', 'styles', 'callbackId', 'positionInfo', 'searchType', 'fileSize', 'currentPage'],
  data () {
    return {
      timeOut: null,
      timer: null,
      waiting: true,
      displayMessage: {
        updateCount: 0,
        successCount: 0,
        totalCount: 0,
        showBackstage: false,
        end: false
      },
      tupuRobot
    }
  },
  created () {
    this.getActive().then(flag => {
      if (!flag) {
        this.activeMessage()
      }
    })
    this.timeOut = null
  },
  methods: {
    async getActive () {
      let res = await analyResult({ callbackId: this.callbackId, positionId: this.positionInfo.id })
      if (res) {
        let { data = null, code = 0 } = res
        if (code === 200 && data && JSON.stringify(data) !== '{}') {
          this.displayMessage = {
            failCount: res.data.failCount,
            successCount: res.data.successCount,
            updateCount: res.data.updateCount
            // totalCount: res.data.totalCount
          }
          if (this.situationSuccess()) {
            if (this.currentPage) {
              this.$emit('setData')
            } else {
              this.$router.push(`/position/positionEditing?positionId=${this.positionInfo.id}&searchType=${this.searchType}&enterpriseId=${this.positionInfo.enterpriseId}&sourcePid=${this.positionInfo.sourcePid}&activeKey=4`)
            }
            return true
          }
        }
      }
      return false
    },
    activeMessage () {
      this.timer = setInterval(() => {
        this.getActive().then(flag => {
          if (flag) {
            clearInterval(this.timer)
            this.timer = null
          }
        })
      }, 3000)
    },
    situationSuccess () { // 判定成功数量和总数一致
      return (this.displayMessage.successCount + this.displayMessage.failCount + this.displayMessage.updateCount) === this.fileSize
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/styles/var'
.analysis.showBackstage
  z-index 100
  background none
  width 180px
  height auto
  right 24px
  .content
    box-shadow 0 6px 6px 4px rgba(0,0,0,0.1)
    height auto
    width auto
    padding 0
    .loading
      background #fff
      border-radius 7px
      padding 3px 12px
      margin 0
      display flex
      flex-direction unset
      justify-content flex-start
      align-items center
      .fileNum
        margin-left 12px
  .changePage
    p
      box-shadow 0 6px 6px 4px rgba(0,0,0,0.1)
      border-radius 4px
      margin-bottom 6px
      background #fff
      margin-left 6px
      padding 0 6px
      &:last-child
        margin-bottom 0
.analysis
  bottom 0
  right 0
  position fixed
  width 100%
  height 100%
  z-index 110
  background rgba(0,0,0,0.4)
  display flex
  justify-content center
  align-items center
  .content
    position relative
    border-radius 7px
    padding 0 24px
    background #f0f0f0
    width 520px
    // height 310px
    p.fileNum
      height 48px
      line-height 48px
      text-align center
    .loading
      border-radius 7px 7px 0 0
      display flex
      flex-direction column
      align-items center
      justify-content center
      margin -24px -24px 12px
      padding 30px 0 0
      background #f0f0f0
    .close
      position absolute
      top 12px
      right 12px
    .backstage
      position absolute
      bottom 12px
      right 24px
</style>
<style lang="stylus">
.analysis
  :global(.clearfix)
    padding-bottom 0
  :global(.clearfix p)
    line-height 28px
    text-align center
</style>
